<script type="text/javascript" src="/admin/assets/js/vue.min.js"></script>
<script type="text/html" id="image-multi-tpl">
    <div class="image-multi">
        <div class="image-multi-item" v-for="(item,index) in images" :key="index">
            <img :src='item.src' class="img"/>
            <span class="delete" @click="del(index)"><i class="layui-icon">&#xe640;</i></span>
            <span class="cover" @click="cover(item)" v-show="type==2">设为封面</span>
            <span class="is-cover" v-show="item.id==cover_id"><b class="em">封面</b></span>
            <input type="hidden" :name="id_field" :value="item.id"/>
            <input type="hidden" :name="name_field" :value="item.name"/>
            <div class="image-multi-item-name" @click="setName(item)">@{{item.name}}</div>
        </div>
        <div class="image-multi-item" v-show="images.length<9">
            <div class="addImage" :id="id">
                <i class="layui-icon" style="font-size: 30px; ">&#xe654;</i>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div style="clear: both;"></div>
    </div>
</script>
@push('style')
    <style>
        .image-multi {
            background-color: #eff3f5;
        }

        .image-multi .addImage {
            background-color: #fff;
            line-height: 120px;
            height: 120px;
            width: 120px;
            text-align: center;
            cursor: pointer;
        }

        .image-multi-item {
            position: relative;
            float: left;
            width: 120px;
            height: 120px;
            padding: 10px;
        }

        .image-multi-item .delete {
            position: absolute;
            display: none;
            width: 20px;
            height: 20px;
            color: #fff;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background-color: #cc2255;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }

        .image-multi-item:hover .delete {
            display: block;
        }

        .image-multi-item .img {
            width: 100%;
            height: 100%;
        }

        .image-multi-item .is-cover {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 0;
            height: 0;
            border-width: 20px;
            border-style: solid;
            border-top-left-radius: 5px;
            opacity: 0.569;
            border-color: red transparent transparent red;
        }

        .image-multi-item .cover {
            position: absolute;
            display: none;
            top: 60px;
            left: 40px;
            cursor: pointer;
            color: #fff;
            padding: 5px;
            background: rgba(0, 0, 0, .3);
        }

        .image-multi-item .em {
            position: absolute;
            top: -15px;
            left: -50px;
            height: 20px;
            width: 80px;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
            color: #f8f8f8;
            font-weight: 400;
            transform: rotate(-45deg);
        }

        .image-multi-item-name {
            position: absolute;
            bottom: 0px;
            left: 10px;
            width: 120px;
            background: rgba(0, 0, 0, .3);
            color: #fff;
            text-align: center;
            cursor: pointer;
            overflow: hidden;
            line-height: 20px;
            height: 20px;
        }

        .image-multi-item:hover .cover {
            display: block;
        }
    </style>
@endpush

<script type="application/javascript">
    /**
     * 多图上传
     */
    Vue.component('image-multi', {
        props: ['name', 'id', 'text', 'p_cover_id', 'type', 'pictures'],
        data: function () {
            return {
                images: [],
                cover_id: 0,
            }
        },
        watch: {
            p_cover_id(val) {
                this.cover_id = val;
            },
            text(val, old) {
                this.images.forEach(function (item) {
                    if (old == item.name) {
                        item.name = val;
                    }
                });
            },
            images:{
                handler: function (val) {
                    console.log('change',val);
                    this.$emit('change',val);
                },
                deep: true,
                immediate: true,
            }
        },
        computed: {
            id_field() {
                return this.name + '[id][]';
            },
            name_field() {
                return this.name + '[name][]';
            }
        },
        methods: {
            del(index) {
                this.images.splice(index, 1);
            },
            cover(item) {
                this.$emit('cover_change', item.id);
            },

            setName(item) {
                layer.prompt({
                    title: '图片名称',
                    value: item.name
                }, function (name, index) {
                    item.name = name;
                    layer.close(index);
                });
            }
        },
        mounted() {
            let that = this;
            this.images = this.pictures;
            layui.use(['upload'], function () {
                let upload = layui.upload;
                upload.render({
                    elem: '#' + that.id,
                    data: {
                        chunk: 1
                    },
                    url: "{{admin_url('file/uploadImage')}}",
                    multiple: true,
                    done: function (res) {
                        SystemUtil.resultFilter(res, function (res) {
                            if (that.type == 2 && !that.cover_id) {
                                that.$emit('cover_change', res.data.id);
                            }
                            let count = that.images.length;
                            res.data.forEach(function (item) {
                                count++;
                                if (count > 9) return;
                                that.images.push({
                                    id: item.id,
                                    name: that.text,
                                    src: item.url
                                });
                            });
                        });
                    }
                });
            });
        },
        template: '#image-multi-tpl'
    });
</script>
